/* 学习目标：JSX中的条件渲染  */
// 作用：控制元素的显示与隐藏，
// 原理：类似v-if, 会创建和销毁元素
// 1. if else语句 配合函数的返回值
// 2. 三元
// 3. 逻辑且

import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.querySelector('#root'));

const isLoading = true;

function hello() {
  if (isLoading) {
    return <h1>...加载中...</h1>;
  } else {
    return <h2>正常显示</h2>;
  }
}

const ulNode = (
  <div>
    {/* 1. 函数配合if else语句 */}
    {hello()}
    {/*  2. 三元 */}
    {isLoading ? <h1>...加载中...</h1> : <h2>正常显示</h2>}
    {/* 3. 逻辑且 */}
    {isLoading && <h1>...加载中...</h1>}
    {!isLoading && <h2>正常显示</h2>}
  </div>
);

root.render(ulNode);
